﻿<template>
  <div id="navArea">
    <div class="headbar yh-layout-box">
      <div class="nav-publicity">
        <span class="nav-tips">
          工业品采购，上一呼百应！
        </span>
        <span class="nav-line">|</span>
        <span class="nav-hotline">
          招商热线：<span class="nav-phone">020-28955054</span>
        </span>
      </div>
      <div class="nav-menus">
        <ul>
          <li><a @click="routeToOut(URL.oldSiteIndex, 'new')">推广版</a><span class="nav-line">|</span></li>
          <li><a @click="routeToPath('/', 'mallplus')">平台首页</a><span class="nav-line">|</span></li>
          <li v-if="userInfo">
            <el-dropdown @command="handleCommand" placement="top">
              <span class="el-dropdown-link">
                <a>{{ userInfo.nickName?userInfo.nickName:userInfo.username }}1<i class="el-icon-arrow-down el-icon--right"></i></a>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="routeToPath('/member', 'mall')"> <a>个人中心</a></el-dropdown-item>
                <el-dropdown-item divided command="loginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span class="nav-line">|</span>

          </li>

          <li v-if="!userInfo"> <a @click="routeToPath('/login', 'mall')">登录</a> <span class="nav-line">|</span></li>
          <li v-if="!userInfo"><a @click="routeToPath('/login/register', 'mall')">注册</a><span class="nav-line">|</span></li>

          <li class="down-app">APP<span class="nav-line">|</span>
            <div class="qrcode-image">
              <img src="~assets/images/layouts/footbars/apps.png">
            </div>
          </li>
          <li><a @click="routeToPath('/help', 'mall', 'new')">帮助中心</a></li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  props: {

  },
  data() {
    return {
      userInfo: this.getUserInfo(),
    }
  },
  created() {

  },
  methods: {
    handleCommand(e) {
      if(e == 'loginOut'){
        this.loginOut()
      }
    }
  }
}
</script>

<style scoped lang="scss">
#navArea{
  background-color: #F7F7F7;
  padding: 13px 0;
  min-width: 1200px;
  font-size: 12px;
  .headbar{
    height: 16px;
  }
  a{
    font-size: 12px;
  }
  .down-app{
    position: relative;
    &:hover .qrcode-image{
      display: block;
    }
    .qrcode-image{
      position: absolute;
      top: 18px;
      left: 50%;
      margin-left: -60px;
      display: none;
      z-index: 99999999;
    }
  }
  .nav-publicity{
    float: left;
    color: #888888;
    .nav-phone{
      color: #255B8B;
      font-weight: 600;
    }
  }
  .nav-menus{
    float: right;
    li{
      display: inline-block;
      float: left;
      color: #888;
      cursor: pointer;
      a{
        color: #888;
        transition: all 0.3s;
        &:hover{
          color: #255B8B;
        }
      }
    }
  }
  .nav-line{
    font-size: 8px;
    padding-right: 14px;
    padding-left: 14px;
    color: #ccc;
  }
}
</style>
<style lang='scss'>
#navArea{
  .nav-menus{
    li{
      .el-dropdown{
        font-size: 12px;
      }
    }
  }
}
</style>
